<template>
  <div class="ind-model-list-index sub-margin">
    <div class="header">
      <div class="sub-page-title">纪实管理</div>
    </div>
    <div class="content">
      <div class="search-box">
        <el-menu
          size="small"
          :default-active="activeCode"
          class="search-menu-box"
          mode="horizontal"
          @select="onMenuClick">
          <el-menu-item v-for="(item, key) in menuInfo" :key="key" :index="key" :disabled="item.status === '1'">
            {{ item.label }}
          </el-menu-item>
        </el-menu>
        <div class="push-btn">
          <el-button type="primary" size="small" @click="submitPush">确定推送</el-button>
        </div>
      </div>
      <div class="menu-con">
        <div class="push-tips">
          注：首次使用考核系统并在开启考核前根据实际需求进行纪实推送，如后续定期进行纪实填写可在纪实配置（暂无开放）中进行设置。
        </div>
        <el-form
          ref="pushForm"
          :model="pushForm"
          :rules="rules"
          label-width="140px"
          size="medium"
          class="push-form"
          label-position="">
          <el-form-item label="纪实推送选项：" prop="radio">
            <el-radio-group v-model="pushForm.radio" @input="radioClick">
              <el-radio :label="item.code" v-for="item in radioList" :key="item.code">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="推送周期：">
            <el-select size="small" v-model="actYear" @change="selectFun('year')">
              <el-option
                v-for="item in yearOptions"
                :key="item.actTime"
                :label="item.actTime + '年'"
                :value="item.actTime"></el-option>
            </el-select>
            <el-select size="small" v-model="actQuarter" v-if="pushForm.radio === '01-03'">
              <el-option
                v-for="item in quarterOptions"
                :key="item.actTime"
                :label="labelQuarter(item.actTime)"
                :value="item.actTime"></el-option>
            </el-select>
            <el-select
              size="small"
              v-model="actMonth"
              v-if="['01-01', '01-02'].includes(pushForm.radio)"
              @change="selectFun('month')">
              <el-option
                v-for="item in monthOptions"
                :key="item.actTime"
                :label="item.actTime + '月'"
                :value="item.actTime"></el-option>
            </el-select>
            <el-select size="small" v-model="actWeek" v-if="pushForm.radio === '01-01'">
              <el-option
                v-for="item in weekOptions"
                :key="item.actTime"
                :label="labelWeek(item.actTime)"
                :value="item.actTime"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="push-history">
          <div class="sub-page-title">历史推送</div>
          <el-scrollbar class="scroll-con">
            <div class="history-con" v-infinite-scroll="loadMore" :infinite-scroll-distance="10">
              <div class="his-item" v-for="(item, index) in historyList" :key="index">
                <div class="his-item-label">纪实推送：{{ item.actName }}</div>
                <div class="his-item-time">{{ item.updateTime }}</div>
                <div class="his-item-tag">{{ item.actType | ActTypeFilter }}</div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  selectActCycleYear,
  selectActList,
  selectActCycleQuarter,
  selectActCycleMonth,
  selectActCycleWeek,
  createActByTypeCycle,
} from '@apis/assessManage.js'
export default {
  name: 'IndModelDocumentIndex',
  components: {},
  props: {},
  data() {
    return {
      pushForm: {
        radio: '01-01',
        roleCode: '',
      },
      rules: {
        radio: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
        roleCode: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
      },
      menuInfo: {
        push: {
          label: '纪实推送',
          status: '0',
        },
        set: {
          label: '纪实配置',
          status: '1',
        },
      },
      activeCode: 'push',
      radioList: [
        {
          code: '01-01',
          label: '周纪实',
        },
        {
          code: '01-02',
          label: '月小结',
        },
        {
          code: '01-03',
          label: '季度总结',
        },
        {
          code: '01-05',
          label: '年度总结',
        },
      ],
      pageIdx: 1,
      pageSize: 10,
      totalPages: 0,
      loading: false,
      historyList: [],
      yearOptions: [],
      actYear: '',
      quarterOptions: [],
      actQuarter: '',
      monthOptions: [],
      actMonth: '',
      weekOptions: [],
      actWeek: '',
    }
  },
  filters: {
    ActTypeFilter(val) {
      switch (val) {
        case '01-01':
          return '周'
        case '01-02':
          return '月'
        case '01-03':
          return '季'
        case '01-05':
          return '年'
        default:
          break
      }
    },
  },
  computed: {},
  watch: {},
  created() {
    this.initData()
  },
  mounted() {},
  methods: {
    initData() {
      this.getYear()
      this.getHistoryList()
    },
    onMenuClick(code) {
      this.activeCode = code
    },
    radioClick() {
      if (['01-01', '01-02'].includes(this.pushForm.radio)) {
        this.getMonth()
      }
      if (this.pushForm.radio === '01-03') {
        this.getQuarter()
      }
    },
    loadMore() {
      if (this.totalPages > this.pageIdx && !this.loading) {
        this.getHistoryList(true)
      }
    },
    async getHistoryList(isAppend) {
      this.loading = true
      let currentPage = this.pageIdx
      if (!isAppend) {
        this.historyList = []
      } else {
        currentPage++
      }
      const { code, data } = await selectActList({
        currentPage: currentPage,
        pageSize: this.pageSize,
      })
      this.loading = false
      if (code === 0 && data && data.records) {
        this.historyList.push(...data.records)
        if (isAppend) {
          this.pageIdx++
        }
        this.totalPages = data.pages
      }
    },
    getYear() {
      selectActCycleYear().then(res => {
        this.yearOptions = res.data
        const arr = res.data.filter(item => {
          return item.recently === 1
        })
        this.actYear = arr.length ? arr[0].actTime : res.data[0].actTime
        this.getMonth()
      })
    },
    getQuarter() {
      selectActCycleQuarter({ actType: this.pushForm.radio, actYear: this.actYear }).then(res => {
        this.quarterOptions = res.data
        const arr = res.data.filter(item => {
          return item.recently === 1
        })
        this.actQuarter = arr.length ? arr[0].actTime : res.data[0].actTime
      })
    },
    getMonth() {
      selectActCycleMonth({ actType: this.pushForm.radio, actYear: this.actYear }).then(res => {
        this.monthOptions = res.data
        const arr = res.data.filter(item => {
          return item.recently === 1
        })

        this.actMonth = arr.length ? arr[0].actTime : res.data[0].actTime
        if (this.pushForm.radio === '01-01') {
          this.getWeek()
        }
      })
    },
    getWeek() {
      selectActCycleWeek({ actType: this.pushForm.radio, actYear: this.actYear, actMonth: this.actMonth }).then(res => {
        this.weekOptions = res.data
        const arr = res.data.filter(item => {
          return item.recently === 1
        })
        this.actWeek = arr.length ? arr[0].actTime : res.data[0].actTime
      })
    },
    labelQuarter(val) {
      switch (val) {
        case '1':
          return '第一季度'
        case '2':
          return '第二季度'
        case '3':
          return '第三季度'
        case '4':
          return '第四季度'

        default:
          break
      }
    },
    labelWeek(val) {
      switch (val) {
        case '1':
          return '第一周'
        case '2':
          return '第二周'
        case '3':
          return '第三周'
        case '4':
          return '第四周'
        case '5':
          return '第五周'
        case '6':
          return '第六周'

        default:
          break
      }
    },
    submitPush() {
      this.$confirm('确定推送当前选择纪实吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          createActByTypeCycle({
            actType: this.pushForm.radio,
            actYear: this.actYear,
            actQuarter: this.actQuarter,
            actMonth: this.actMonth,
            actWeek: this.actWeek,
          }).then(res => {
            if (res.code === 0) {
              this.$message.success('推送成功')
              this.getHistoryList()
            }
          })
        })
        .catch(() => {})
    },
    selectFun(type) {
      if (type === 'year') {
        if (this.pushForm.radio === '01-03') {
          this.getQuarter()
        } else if (['01-01', '01-02'].includes(this.pushForm.radio)) {
          this.getMonth()
        }
      }
      if (type === 'month' && this.pushForm.radio === '01-01') {
        this.getWeek()
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@styles/layout.scss';

.ind-model-list-index {
  height: 100%;

  .content {
    height: calc(100% - 78px);
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    .search-box {
      width: 100%;
      margin-bottom: 20px;
      position: relative;
      .push-btn {
        position: absolute;
        right: 20px;
        bottom: 10px;
      }
    }
    .menu-con {
      flex: 1;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      .push-tips {
        color: #d9001b;
      }
      /deep/.push-form {
        margin-top: 10px;
        .el-form-item__label {
          color: #333333;
          font-size: 16px;
        }
      }
    }
    .push-history {
      flex: 1;
      overflow: hidden;
      .sub-page-title {
        padding-top: 15px;
        font-size: 18px;
        line-height: 30px;
        font-weight: bold;
        color: #333;
        padding-bottom: 15px;
        border-bottom: 1px solid #e4eaf0;
      }
      .scroll-con {
        height: calc(100% - 60px);
        .history-con {
          height: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          padding: 0 20px;
          .his-item {
            width: 48%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px;
            background-color: #e5f0ffcc;
            margin-top: 15px;
            padding-left: 20px;
            padding-right: 50px;
            border-radius: 4px;
            position: relative;
            &::after {
              content: '';
              position: absolute;
              right: 0;
              top: 0;
              border-top: 24px solid #d6e6ff;
              border-right: 24px solid #d6e6ff;
              border-bottom: 24px solid transparent;
              border-left: 24px solid transparent;
              border-radius: 4px;
            }
            &-time {
              color: #999999;
            }
            &-tag {
              position: absolute;
              right: 5px;
              top: 5px;
              color: #2b78f1;
              z-index: 1;
              font-size: 16px;
              transform: rotate(45deg);
            }
          }
        }
      }
    }
  }
}
</style>
